<template>
  <div class="search">
    <el-card>
      <el-form :inline="true" label-position="top" :model="searchInfo">
        <el-row type="flex" align="middle">
          <el-col :span="18" style="height: 82px">
            <el-form-item :label="searchName[0]" style="width: 30%">
              <el-input v-model="searchInfo.code" placeholder="请输入" />
            </el-form-item>
            <el-form-item :label="searchName[1]" style="width: 30%">
              <el-input v-model="searchInfo.name" placeholder="请输入" />
            </el-form-item>
            <el-form-item :label="searchName[2]" style="width: 30%">
              <el-select v-model="searchInfo.status" placeholder="请选择" style="width: 100%">
                <el-option v-for="item in selectData" :key="item.code" :label="item.label" :value="item.code" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" style="height: 62px">
            <el-row type="flex" justify="end">
              <el-form-item>
                <el-button type="primary" @click="onSubmit">搜索</el-button>
                <el-button type="primary" plain @click="reset">重置</el-button>
              </el-form-item>
            </el-row>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'Search',
  props: {
    searchName: {
      type: Array,
      default: () => ['仓库编号', ' 仓库名称', '仓库状态']
    }
  },
  data() {
    return {
      searchInfo: {
        code: '',
        name: '',
        status: ''
      },
      // 选择框数据
      selectData: [
        { code: null, label: '全部' },
        { code: 0, label: '停用' },
        { code: 1, label: '启用' }
      ]
    }
  },
  methods: {
    onSubmit() {
      this.$emit('sendInfo', this.searchInfo)
    },
    reset() {
      this.searchInfo = {
        code: '',
        name: '',
        status: ''
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.el-card {
  margin-bottom: 20px;
}
.el-button {
  height: 40px;
  border-radius: 20px;
  border: 0;
  font-size: 14px;
  font-family: PingFangSC, PingFangSC-Medium;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  outline: 0;
  margin-top: 20px;
}
::v-deep .el-form-item__label {
  padding: 0;
  line-height: 30px;
  font-size: 12px;
  color: #887e7e;
}
.el-form-item {
  margin-left: 15px;
}
::v-deep .el-input__inner {
  height: 40px;
  background-color: #f8f5f5;
}
</style>
